'use strict'
import React, { Component } from 'react';
import { Row, Col, Tag, Tooltip, Icon } from 'antd';
import './style.less';
export default class AutoRollComponent extends Component {

    constructor(props) {
        super(props);
        this.scrollElem = null;
        this.stopscroll = false;
        this.preTop = 0;
        this.cloneEle = null;
        this.currentTop = 0;
        this.marqueesHeight = 0;
        this.interval = null;
        this.state = {
            showContent: false,
            dataObj: {}
        }
    }

    marque = (height) => {
        try {
            this.scrollElem = document.getElementById(this.props.divId);
            this.marqueesHeight = height;
            if (this.scrollElem) {
                this.scrollElem.style.height = this.marqueesHeight;
                this.scrollElem.style.overflow = 'hidden';
            }

            if (!this.props.closeroll) {
                if (this.props.canScroll) {
                    // this.cloneEle = document.getElementById(this.props.divId);
                    // this.scrollElem.appendChild(this.cloneEle.cloneNode(true));
                    this.repeat()
                }
            }
            // let length = this.props.data.length;
            // if (length > 5) {
            //     this.cloneEle = document.getElementById(this.props.divId);
            //     this.scrollElem.appendChild(this.cloneEle.cloneNode(true));
            //     this.repeat();
            // }
        } catch (e) { console.log(e) }
    }


    repeat = () => {
        this.scrollElem.scrollTop = 0;

        this.interval = setInterval(() => {
            if (this.stopscroll) return;
            this.currentTop = this.currentTop + 1;
            this.preTop = this.scrollElem.scrollTop;
            this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
            //  console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop}  === this.preTop:${this.preTop}`);
            if (this.preTop === this.scrollElem.scrollTop) {
                this.scrollElem.scrollTop = this.marqueesHeight;
                this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
            }
        }, 50);
    }


    componentWillUnmount() {
        clearInterval(this.interval);
    }

    componentDidMount() {
        this.marque(10);
    }

    onMouseOver = () => {
        this.stopscroll = true;
    }

    onMouseOut = () => {
        this.stopscroll = false;
    }

    handelShowContent = (q) => {
        this.setState({ dataObj: q, showContent: true })
    }

    close = () => {
        this.stopscroll = false;
        this.setState({ showContent: false, begin: 0, end: 100, dataObj: {} })
    }


    render() {
        const { dataObj } = this.state;
        const { changeStyleCol, heads, spans, data, showWord, divId, divHeight, content, color, type, titleLeft, canScroll } = this.props;
        return (
            <div style={{ textAlign: 'left' }}>
                {heads ?
                    <Row className={'bg-row'} style={{ lineHeight: '40px', height: 40, fontSize: 16, wordBreak: 'keep-all', whiteSpace: 'nowrap', textAlign: titleLeft ? 'left' : 'center', paddingLeft: titleLeft ? 5 : 0 }}>
                        {heads.map((c, index) => {
                            return <Col style={{ color: color ? color : '#fff', paddingLeft: titleLeft ? 10 : 'auto' }} span={spans[index]} key={index}>{c}</Col>
                        })
                        }
                    </Row>
                    : ''}
                <div id={divId} className={'hidden-scroll-bar-y'} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                    <div>
                        {content ? content : ''}
                    </div>
                </div>
            </div >
        )
    }
}